import "./style.css";
import { Tabs } from "antd-mobile";
import { useTabs } from "./useTabs";
import HomeList from "./HomeList";

/**
 * Home组件
 *
 * 该组件用于渲染首页，包含频道标签页和对应的内容列表
 *
 * @returns 返回首页组件的JSX元素
 */
const Home = () => {
  // 获取频道标签页数据
  const { channels } = useTabs();

  return (
    <div>
      <div className="tabContainer">
        {/* 渲染标签页组件，默认激活第一个标签页 */}
        <Tabs defaultActiveKey={"0"}>
          {/* 遍历频道数据，为每个频道创建一个标签页 */}
          {channels.map((item) => (
            <Tabs.Tab title={item.name} key={item.id}>
              <div className="listContainer">
                {/* 渲染频道对应的内容列表组件 */}
                <HomeList channelId={"" + item.id} />
              </div>
            </Tabs.Tab>
          ))}
        </Tabs>
      </div>
    </div>
  );
};

export default Home;
